

import classNames from 'classnames';
import style from './TradeTable.module.scss';

type OpenOrder = {
  FID: string,
  FCNY: string,
  FGoods: string,
  FMax: number,
  FMin: number,
  FPrice: number
  FQuantity: number,
  FUserName: string,
  FWay: string,
}

type Props = {
  data: OpenOrder[];
};

const TradeTable = ({ data }: Props) => {

  const elementMapFunction = (transaction: OpenOrder) => (
    <div key={transaction.FID} className={style.dataRowBlock}>
      <div className={style.dataRow}>
        <div className={classNames(style.item, style.timeItem, style.itemWidth, style.head)}>
          <div className={style.head}>{transaction.FUserName}</div>
        </div>
        <div className={classNames(style.item, style.itemWidth)}>
          {`${transaction.FPrice} ${transaction.FCNY}`}
        </div>
        <div className={classNames(style.item, style.itemWidth)}>
          <div className={style.amountRow}>
            <div className={style.amountTitle}>数量</div>
            <div>{`${transaction.FQuantity} ${transaction.FGoods}`}</div>
          </div>
          <div className={style.amountRow}>
            <div className={style.amountTitle}>限额</div>
            <div>{`${transaction.FMin} - ${
              transaction.FMax
            } ${transaction.FCNY}`}</div>
          </div>
        </div>
        <div className={classNames(style.item, style.infoItem, style.itemWidth)}>
          <div className={style.bank}>
            银行卡
          </div>
        </div>
      </div>
      <div className={style.divider} />
    </div>
  );

  return (
    <div className={style.self}>
      <div className={style.titleRow}>
        <div className={style.itemWidth}>广告主</div>
        <div className={style.itemWidth}>单价</div>
        <div className={style.itemWidth}>
          数量/限额
        </div>
        <div className={style.itemWidth}>
          银行卡
        </div>
      </div>
      <div className={style.divider} />
      {data.map(elementMapFunction)}
    </div>
  );
};

export default TradeTable;
